<template>
	<view class="city_main">
		<view class="title">
			当前定位
		</view>
		<view class="main_top">
			<view class="top_left">
				{{locationName || '未知'}}
			</view>
			<view class="top_right" @click="getLocation">
				<u-icon name="map" color="#999" size="28"></u-icon>
				重新定位
			</view>
		</view>
		<view class="title">
			热门城市
		</view>
		<view class="main_hot">
			<view class="hot" v-for="(item,index) in hotList" :key="index" @click="hotBtn(item)">
				{{item.name}}
			</view>
		</view>
		<view class="title" v-if="areaSelector.length">
			选择城市
		</view>
		<view style="height: 20rpx;"></view>
		<view class="main_list" v-for="(item,index) in areaSelector" :key="index">
			<view class="list_p">
				{{item.name}}
			</view>
			<view class="list_c" v-for="(ite,idx) in item.children" :key="idx" @click="hotBtn(ite)">
				{{ite.name}}
			</view>
		</view>
	</view>
</template>

<script>
	import { mapState } from 'vuex'
	export default {
		data() {
			return {
				hotList:[
					{
						name:'北京',
						latitude: "116.4052850",
						longitude: "39.9049890"
					},
					{
						name:'成都',
						latitude: "104.0657350",
						longitude: "30.6594620"
					},
					{
						name:'广州',
						latitude: "113.2806370",
						longitude: "23.1251780"
					},
					{
						name:'深圳',
						latitude: "114.0859470",
						longitude: "22.5470000"
					},
					{
						name:'重庆',
						latitude: "106.5049620",
						longitude: "29.5331550"
					},
					{
						name:'上海',
						latitude: "121.4726440",
						longitude: "31.2317060"
					},
					{
						name:'杭州',
						latitude: "120.1535760",
						longitude: "30.2874590"
					},
					{
						name:'济南',
						latitude: "117.0009230",
						longitude: "36.6758070"
					},
					{
						name:'西安',
						latitude: "108.9480240",
						longitude: "34.2631610"
					},
					{
						name:'沈阳',
						latitude: "123.4290960",
						longitude: "41.7967670"
					},
				],
				areaSelector:[],
			};
		},
		computed: {
			...mapState({
				locationName: state => state.user.locationName
			})
		},
		onLoad() {
			this.$u.get('/addons/hicity/index/getCity', {}).then(res => {
				this.areaSelector = res;
			})
		},
		methods:{
			// 选择
			hotBtn(item){
				var obj = {
					latitude:item.latitude,
					longitude:item.longitude
				}
				this.$store.commit('setLocationInfo',obj)
				this.$store.commit('setLocationName',item.name)
				this.$nextTick(()=>{
					uni.navigateBack()
				})
			},
			// 获取定位
			getLocation(){
				var self = this
				uni.authorize({
					scope: 'scope.userLocation',
					success(res) {
						uni.getLocation({
							type: 'gcj02',
							success: function(resl) {
								self.$store.commit('setLocationInfo',resl)
								uni.request({
									url: `https://apis.map.qq.com/ws/geocoder/v1/?location=${encodeURIComponent(resl.latitude)},${encodeURIComponent(resl.longitude)}&key=D2BBZ-IBCWQ-IL75Z-4NABT-L3S46-LVB2U&get_poi=0`,
									method: 'GET',
									success: (resr)=> {
										self.locationShow = true
										if(resr.statusCode == 200){
											var txt=resr.data.result.address_component.city
											self.$store.commit('setLocationName',txt)
										}
									},
									fail() {
										self.locationShow = true
										this.$u.toast('获取位置失败')
									}
								})
							},
							fail: error => {
								console.log(error)
							}
						})
					},
					fail(error) {
						//失败的回调
						uni.showModal({
							title: '提示',
							content: '获取定位权限失败，是否立即授权',
							success(modalres) {
								if (modalres.confirm) {
									uni.openSetting()
								} else {
									self.locationShow = true
									uni.showToast({
										icon: 'none',
										title: '用户取消授权'
									})
								}
							},
						})
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	.city_main{
		width: 100%;
		.title{
			width: 100%;
			padding: 10rpx 20rpx 0 20rpx;
			font-size: 30rpx;
			color: #333;
			font-weight: 500;
		}
		.main_top{
			width: 100%;
			padding: 20rpx 20rpx 25rpx 20rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			.top_left{
				height: 70rpx;
				line-height: 70rpx;
				padding: 0 35rpx;
				font-size: 28rpx;
				color: #666;
				background: #eee;
				border-radius: 5rpx;
			}
			.top_right{
				display: flex;
				align-items: center;
				justify-content: flex-end;
				font-size: 26rpx;
				color: #888;
				.u-icon{
					margin-right: 10rpx;
				}
			}
		}
		.main_hot{
			width: 100%;
			padding: 20rpx 20rpx 5rpx 20rpx;
			display: flex;
			justify-content: space-between;
			flex-wrap: wrap;
			.hot{
				height: 70rpx;
				line-height: 70rpx;
				padding: 0 35rpx;
				font-size: 28rpx;
				color: #666;
				margin-bottom: 20rpx;
				background: #eee;
				border-radius: 5rpx;
			}
		}
		.main_list{
			width: 100%;
			.list_p{
				position: sticky;
				top: 0;
				width: 100%;
				padding: 0 20rpx;
				line-height: 70rpx;
				font-size: 28rpx;
				color: #666;
				background: #eee;
			}
			.list_c{
				width: 680rpx;
				margin: 0 auto;
				padding: 0 10rpx;
				line-height: 90rpx;
				font-size: 28rpx;
				color: #666;
				border-bottom: 1rpx solid #eee;
			}
		}
	}
</style>
